<!DOCTYPE html>
<html>
    <head lang = "en">
        <meta charset = "UTF-8">
        <meta name = "viewport">
        <title>购物车</title>
    	<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
     
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
        <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
        <script src = 'js/myCookie.js'></script>
        <script type = "text/javascript">
			var count = $('#count').val();
			var priceSingle =  $('#price').text();
		</script>
    </head>
    <body>
         <h1><a href = "index.jsp" style = "text-decoration:none;">&nbsp;华为商城</a><small>&nbsp;购物车</small></h1>
          
         <div style = "align:center">
             <table class="table table-bordered table-striped table-hover table-condensed">
               <caption>&nbsp;&nbsp;购物车</caption>
               <thead>
                  <tr>
                     <th>全选</th>
                     <th>订单号</th>
                     <th>创建时间</th>
                     <th>商品图片</th>
                     <th>商品描述</th>
                     <th>数量</th>
                     <th>单价(元)</th>
                     <th>优惠(元)</th>
                     <th>最终价格(元)</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                      <td>
                          <input class="choo" type="checkbox" value="choose"  />选择
                      </td>
                      <td><p id = "order_id"></p></td>
                      <td><p id = "order_date"></p></td>
                      <td><img src = "imgs/p40/6.png"/></td>
                      <td>
                          HUAWEI P40pro+ <br> 陶瓷白<br> 5G全网通 <br> 8+256GB <br> 官方标配
                      </td>
                      <td><!--手机购买的数量-->
                        <button type="button" id="put" class="btn btn-xs" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add" onclick = "countAdd();">
							<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
						</button>
						
						<button type="button" id="put" class="btn btn-xs" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add" onclick = "countMinus();">
							<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
						</button>
						
						<br><br>
						<input type = "text" size = "2"  value = "1"/>
                      </td>
                      <td><p id = "price">8588</p></td>
                      <td>100</td>
                      <td>7688</td>
                  </tr>
                  
                  <tr>
                      <td>
                          <input class="choo" type="checkbox" value="choose"  />选择
                      </td>
                      <td><p id = "order_id"></p></td>
                      <td><p id = "order_date"></p></td>
                      <td><img src = "imgs/p40/6.png"/></td>
                      <td>
                          HUAWEI P40pro+ <br> 陶瓷白<br> 5G全网通 <br> 8+256GB <br> 官方标配
                      </td>
                      <td><!--手机购买的数量-->
                        <button type="button" id="put" class="btn btn-xs" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add" onclick = "countAdd();">
							<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
						</button>
						
						<button type="button" id="put" class="btn btn-xs" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add" onclick = "countMinus();">
							<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
						</button>
						
						<br><br>
						<input type = "text"  size = "2" value = "1"/>
                      </td>
                      <td><p>8588</p></td>
                      <td>100</td>
                      <td>7688</td>
                  </tr>
                  
                  <tr>
                      <td>
                          <input class="choo" type="checkbox" value="choose"  />选择
                      </td>
                      <td><p id = "order_id"></p></td>
                      <td><p id = "order_date"></p></td>
                      <td><img src = "imgs/p40/6.png"/></td>
                      <td>
                          HUAWEI P40pro+ <br> 陶瓷白<br> 5G全网通 <br> 8+256GB <br> 官方标配
                      </td>
                      <td><!--手机购买的数量-->
                        <button type="button" id="put" class="btn btn-xs" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add" onclick = "countAdd();">
							<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
						</button>
						
						<button type="button" id="put" class="btn btn-xs" style="background-color: #459DF5; color: white;" data-toggle="modal" data-target="#add" onclick = "countMinus();">
							<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
						</button>
						
						<br><br>
						<input type = "text" size = "2" id = "count" value = "1"/>
                      </td>
                      <td><p>8588</p></td>
                      <td>100</td>
                      <td>7688</td>
                  </tr>
               </tbody>
            </table>
         </div>
         
         
         
         <!--最终 支付-->
         <br>
         <span style = "font-size:20px;font-weight:bold;color:#008B00;margin-left:30%;">总价格:￥15200</span>
         <div class = "btn-group">
             <br>
             <button  target = "_blank" type="button" class = "btn btn-success btn-lg dropdown-toggle"  data-toggle = "dropdown" style = "margin-left:100px;">我要支付&nbsp;<span class = "caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="http://xyc.life/pay.html">微信</a>
                </li>
                <li>
                    <a href="http://xyc.life/pay.html">支付宝</a>
                </li>
                <li class="divider"></li>
                <li class = "dropdown-header">银联</li>
                <li>
                    <a href="http://xyc.life/pay.html">交通银行</a>
                </li>
                <li>
                    <a href="http://xyc.life/pay.html">中国银行</a>
                </li>
                <li>
                    <a href="http://xyc.life/pay.html">招商银行</a>
                </li>
                <li>
                    <a href="http://xyc.life/pay.html">农业银行</a>
                </li>
                <li>
                    <a href="http://xyc.life/pay.html">其他</a>
                </li>
            </ul>
         </div>
        
         <script type = "text/javascript">
            //生成随机数
            function play() {
                 return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
            }
             
            //生成日期
            function getDate() {
                var date = new Date();
                var seperator1 = "/";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month<= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate<= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() +seperator1 + month + seperator1 + strDate;
                return currentdate;
             }
             
            
            document.getElementById("order_id").innerHTML = 'hw' + play() + play();
            document.getElementById("order_date").innerHTML = getDate();
         </script>
         
          <!--手机数量增加/减少  同时修改价格-->
						<script type = "text/javascript">
						
						    var count = $('#count').val();
						    
						    var priceSingle =  $('#price').text();
						    
						    function countAdd(){
						        count = $('#count').val();
						        priceSingle =  $('#price').text();
						        
						        $("#count").attr("value",parseInt(count)+1);
						        
						        
						    }
						    
						    function countMinus(){
						        count = $('#count').val();
						       
						        if(count != 0){
						            $("#count").attr("value",parseInt(count)-1);
						         
						          
						        }else{
						            alter('数量为0,不能再减少了')
						        }
						    }
						</script>
    </body>
</html>